<template>
	<!-- <view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view> -->
	
	<!-- 新闻模板 快捷键 -->
	<!-- 每一个模板, 只有一个跟节点, 用来挂在 vue 示例 -->
	<view class="content">
		<!-- ul li 没有了, 用 uni-list 替代 -->
		<!-- <uni-list>
			<uni-list-item v-for="item,index in news" :key="index"></uni-list-item>
		</uni-list> -->
		
		<view class="uni-list">
			<!-- 这里有一个不理解的, 就是如何传递参数??? 当点击的时候. 先抄示例代码, 之后再理解和修改 -->
			<!-- <view class="uni-list-cell" hover-class="uni-list-hover-cell" v-for="(item,index) in news" :key="index" @tap="openinfo" :data-newsid="item.post_id"> -->

			<!-- 这样传递参数更容易理解一些 -->
			<!-- 这里涉及了一个 css 样式控制 -->
			<!-- : @ 都是 vue 里面带来的便利写法, 表示 v-bind and v-click -->
			<!-- flex 布局是怎么玩的 ??? -->
			<view class="uni-list-cell" hover-class="uni-list-hover-cell" v-for="(item,index) in news" :key="index" @tap="openinfo($event, item.post_id)">
				<view class="uni-media-list">
					<image :src="item.author_avatar" class="uni-media-list-logo"></image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{item.title}}</view>
						<view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// js 的一个导出语法 export default ...
	// 选项式语法
	export default {
		data() {
			return {
				news: []
			}
		},
		onLoad() {
			// uni
			// uni 是一个什么库呢 ??? TODO...
			
			// 页面加载的时候, 
			uni.showLoading({
				title: 'loading...',
				// mask: false
			});
			
			// 这里涉及到网络的请求
			uni.request({
				url: 'https://unidemo.dcloud.net.cn/api/news',
				method: 'GET',
				data: {},
				success: res => {
					// console.log(res)
					this.news = res.data
					uni.hideLoading()
				},
				fail: () => {},
				complete: () => {}
			});
		},
		methods: {
			// 这种专递参数的方式更容易理解
			openinfo: function(e, newsid) {
				// console.log(JSON.stringify(e))
				// console.log(newsid)
				// 这里涉及到页面的跳转, 还有一个对应的 "uni.navigateBack", 
				uni.navigateTo({
					url: '../newsinfo/newsinfo?newsid=' + newsid,		// 通过页面的 url 地址, 传递了参数.
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		
		// methods: {
		// 	openinfo: function(e) {
		// 		console.log(JSON.stringify(e))
		// 		// console.log(newsid)
		// 		let newsid = e.currentTarget.dataset.newsid
		// 		uni.navigateTo({
		// 			url: '../newsinfo/newsinfo?newsid=' + newsid,		// 通过页面的 url 地址, 传递了参数.
		// 			success: res => {},
		// 			fail: () => {},
		// 			complete: () => {}
		// 		});
		// 	}
		// }
	}
</script>

<style>
	.uni-media-list-body{height: auto;}
	.uni-media-list-text-top{line-height:1.6em;}
</style>
